<ion-view left-buttons="leftButtons"
          class="view-wallet-tx">
  <ion-nav-title>
    <!-- no title on large screen-->
    <span class="visible-xs visible-sm" ng-if="!loading && enableSelectWallet">
      <span ng-if="formData.name || formData.uid">{{formData.name || formData.uid}} </span>
      <i class="ion-key"></i> {{formData.pubkey|formatPubkey}}
    </span>
  </ion-nav-title>

  <ion-nav-buttons side="secondary">
    <cs-extension-point name="nav-buttons"></cs-extension-point>

    <button class="button button-icon button-clear visible-xs visible-sm"
            ng-if="enableSelectWallet"
            ng-click="showSelectWalletModal()">
      <i class="ion-arrow-down-b"></i>
    </button>
  </ion-nav-buttons>

  <ion-content scroll="true"
               class="refresher-top-bg refresher-light"
               bind-notifier="{ rebind:settings.useRelative, locale:settings.locale.id}">

    <ion-refresher pulling-text="{{:locale:'COMMON.BTN_REFRESH' | translate}}"
                   on-refresh="doUpdate(true)">
    </ion-refresher>

    <div class="positive-900-bg hero">
      <div class="content" ng-if="!loading">
        <!-- select wallet button -->
        <a class="hidden-xs hidden-sm"
           style="color: lightgray;"
           ng-if="enableSelectWallet"
           title="{{:locale:'ACCOUNT.SELECT_WALLET_MODAL.TITLE'|translate}}"
           ng-click="showSelectWalletPopover($event)">
          <span ng-if="formData.name || formData.uid">{{formData.name || formData.uid}} </span>
          <i class="ion-key"></i> {{formData.pubkey|formatPubkey}}
          <i class="ion-arrow-down-b"></i>
        </a>

        <h1 class="light">
          <span ng-bind-html=":balance:rebind:formData.balance | formatAmount:{currency: $root.currency.name}"></span>
        </h1>
        <h4 ng-if="!loading && $root.settings.expertMode"
               style="font-style: italic;">
          (<span ng-bind-html=":balance:rebind:formData.balance | formatAmount:{useRelative:!$root.settings.useRelative, currency: $root.currency.name}"></span>)
        </h4>
        <div class="helptip-anchor-center">
          <a id="helptip-wallet-balance">&nbsp;</a>
        </div>
      </div>

      <h2 class="content light" ng-if="loading">
        <ion-spinner icon="android"></ion-spinner>
      </h2>
    </div>

    <!-- Buttons bar-->
    <div class="hidden-xs hidden-sm padding text-center" ng-if="!loading">

      <button class="button button-stable button-small-padding icon ion-loop ink"
              ng-click="doUpdate()"
              title="{{'COMMON.BTN_REFRESH' | translate}}">
      </button>

      <button class="button button-stable button-small-padding icon ion-android-download ink"
              ng-click="downloadHistoryFile()"
              title="{{'COMMON.BTN_DOWNLOAD_ACCOUNT_STATEMENT' | translate}}">
      </button>

      <cs-extension-point name="buttons"></cs-extension-point>

      &nbsp;&nbsp;

      <button class="button button-calm ink"
              ng-click="showTransferModal()">
        {{:locale:'COMMON.BTN_SEND_MONEY' | translate}}
      </button>
  </div>

    <div class="row no-padding">

      <div class="col col-15 hidden-xs hidden-sm">&nbsp;</div>

      <div class="col">



        <div class="list" ng-class="::motion.ionListClass">

          <!-- Errors transactions-->
          <a class="item item-icon-left item-icon-right ink" ng-if="formData.tx.errors && formData.tx.errors.length"
             ng-click="showTxErrors()">
            <i class="icon ion-alert-circled"></i>
            {{:locale:'ACCOUNT.ERROR_TX'|translate}}
            <div class="badge badge-assertive">
              {{formData.tx.errors.length}}
            </div>
            <i class="gray icon ion-ios-arrow-right"></i>
          </a>

          <!-- Pending transactions -->
          <ng-if ng-if="formData.tx.pendings.length">
            <span class="item item-pending item-divider" >
               <b class="ion-clock"> </b>
              {{:locale:'ACCOUNT.PENDING_TX'|translate}}
            </span>

            <div class="item item-pending item-tx item-icon-left"
                 ng-repeat="tx in formData.tx.pendings"
                 ng-init="pending=true;"
                 ng-include="'templates/wallet/item_tx.html'">
            </div>
          </ng-if>

          <!-- Validating transactions -->
          <ng-if ng-if="formData.tx.validating.length">
            <span class="item item-pending item-divider">
              <b class="icon ion-checkmark" style="font-size: 12px;"> </b>
              <b class="icon-secondary ion-help" style="font-size: 12px; top: 2px; left: 11px;"> </b>
              {{:locale:'ACCOUNT.VALIDATING_TX'|translate}}
            </span>

            <div class="item item-pending item-tx item-icon-left"
                 ng-repeat="tx in formData.tx.validating"
                 ng-init="validating=true;"
                 ng-include="::'templates/wallet/item_tx.html'">
            </div>
          </ng-if>

          <!-- Last Transactions -->
          <span class="item item-divider" ng-if="!loading">
            <b class="icon ion-checkmark"> </b>
            {{:locale:'ACCOUNT.LAST_TX'|translate}}
            <a id="helptip-wallet-tx" style="position: relative; bottom: 0; right: 0px;">&nbsp;</a>
          </span>

          <span class="item padding" ng-if="!loading && !formData.tx.history.length">
            <span class="gray">{{:locale:'ACCOUNT.NO_TX'|translate}}</span>
          </span>

          <!-- Fix #780: do NOT use hash ash id
          <div ng-repeat="tx in formData.tx.history track by tx.hash"
          -->
          <div ng-repeat="tx in formData.tx.history"
             class="item item-tx item-icon-left"
             ng-include="::!tx.isUD ? 'templates/wallet/item_tx.html' : 'templates/wallet/item_ud.html'">
          </div>
          <div class="item item-text-wrap text-center" ng-if="formData.tx.fromTime > 0">
            <p>
              <a ng-click="showMoreTx()">{{:locale:'ACCOUNT.SHOW_MORE_TX'|translate}}</a>
              <span class="gray" translate="ACCOUNT.TX_FROM_DATE" translate-values="{fromTime: formData.tx.fromTime}"></span>
              <span class="gray">|</span>
              <a ng-click="showMoreTx(-1)" translate>ACCOUNT.SHOW_ALL_TX</a>
            </p>
          </div>
        </div>
      </div>

      <div class="col col-15 hidden-xs hidden-sm">&nbsp;</div>

    </div>


    </div>
  </ion-content>

  <button id="fab-transfer"
          ng-show="!loading"
          class="button button-fab button-fab-bottom-right button-energized-900 hidden-md hidden-lg drop ng-hide"
          ng-click="showTransferModal()">
    <i class="icon ion-android-send"></i>
  </button>
</ion-view>
